<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%--    a--%>
    <title>添加人员</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        h2 { border-bottom: 2px solid #ccc; padding-bottom: 10px; }
        form { margin-top: 20px; width: 400px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; }
        input, select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        button { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
    <!-- 引入jQuery -->
    <script src="js/jquery-1.8.3.js"></script>
    <script>
        $(document).ready(function() {
            // 表单提交验证
            $("form").submit(function(e) {
                var name = $("#name").val().trim();
                var sex = $("#sex").val();
                var age = $("#age").val().trim();
                var rank = $("#rank").val();
                var department = $("#department").val();

                if (name === "") {
                    alert("姓名不能为空！");
                    e.preventDefault(); // 阻止表单提交
                } else if (sex === "请选择") {
                    alert("请选择性别！");
                    e.preventDefault();
                } else if (age === "") {
                    alert("年龄不能为空！");
                    e.preventDefault();
                } else if (rank === "请选择") {
                    alert("请选择等级！");
                    e.preventDefault();
                } else if (department === "请选择") {
                    alert("请选择部门！");
                    e.preventDefault();
                }
            });
        });
    </script>
</head>
<body>
<h2>添加人员</h2>
<form action="hrAction.do?action=add" method="post">
    <div class="form-group">
        <label>姓名:</label>
        <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
        <label>性别:</label>
        <select id="sex" name="sex">
            <option value="请选择">请选择</option>
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
    </div>
    <div class="form-group">
        <label>年龄:</label>
        <input type="number" id="age" name="age" required>
    </div>
    <div class="form-group">
        <label>等级:</label>
        <select id="rank" name="rank">
            <option value="请选择">请选择</option>
            <option value="1级">1级</option>
            <option value="2级">2级</option>
            <option value="3级">3级</option>
            <option value="4级">4级</option>
            <option value="5级">5级</option>
        </select>
    </div>
    <div class="form-group">
        <label>部门:</label>
        <select id="department" name="department">
            <option value="请选择">请选择</option>
            <option value="开发部">开发部</option>
            <option value="支持部">支持部</option>
            <option value="工程质量部">工程质量部</option>
        </select>
    </div>
    <button type="submit">提交</button>
</form>
</body>
</html>